<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>贪吃蛇游戏</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>贪吃蛇游戏</h1>
        </header>

        <main>
            <div class="game-section">
                <div class="game-container">
                    <div class="game-info">
                        <div class="score-display">
                            <h3>当前分数: <span id="currentScore">0</span></h3>
                            <h3>最高分: <span id="gameHighestScore">0</span></h3>
                        </div>
                        <div class="controls">
                            <button id="startBtn" onclick="startGame()">开始游戏</button>
                            <button id="pauseBtn" onclick="pauseGame()" disabled>暂停</button>
                            <button id="resetBtn" onclick="resetGame()">重置</button>
                        </div>
                    </div>
                    
                    <canvas id="gameCanvas" width="400" height="400"></canvas>
                    
                    <div class="game-status">
                        <p id="gameStatus">按空格键或点击开始游戏按钮开始</p>
                    </div>
                </div>
            </div>

            <div class="sidebar">
                <div class="auth-section" id="authSection">
                    <div id="loginForm" class="auth-form">
                        <h3>登录</h3>
                        <input type="text" id="loginUsername" placeholder="用户名" required>
                        <input type="password" id="loginPassword" placeholder="密码" required>
                        <button onclick="login()">登录</button>
                        <p>还没有账号？ <a href="#" onclick="showRegister()">立即注册</a></p>
                    </div>
                    
                    <div id="registerForm" class="auth-form" style="display: none;">
                        <h3>注册</h3>
                        <input type="text" id="registerUsername" placeholder="用户名" required>
                        <input type="password" id="registerPassword" placeholder="密码" required>
                        <button onclick="register()">注册</button>
                        <p>已有账号？ <a href="#" onclick="showLogin()">立即登录</a></p>
                    </div>
                </div>
                
                <div id="userInfo" class="user-info" style="display: none;">
                    <span>欢迎，<span id="currentUsername"></span>！</span>
                    <span>最高分：<span id="highestScore">0</span></span>
                    <button onclick="logout()">退出登录</button>
                </div>

                <div class="leaderboard">
                    <h3>排行榜</h3>
                    <div id="leaderboardList">
                        <p>加载中...</p>
                    </div>
                </div>
            </div>

        <div id="gameOverModal" class="modal" style="display: none;">
            <div class="modal-content">
                <h2>游戏结束！</h2>
                <p>最终得分：<span id="finalScore">0</span></p>
                <p id="newRecordText" style="display: none; color: #4CAF50;">🎉 新纪录！</p>
                <button onclick="closeModal()">再来一局</button>
            </div>
        </div>
    </div>

    <script src="game.js"></script>
    <script src="api.js"></script>
</body>
</html>